import React, { Component } from 'react';

interface IProps {
    picturePaths: string[]
}

interface IState {
    pictureToDisplay: number;
    preClientX: number;
    mouseDown: boolean;
}

class StereoDisplay extends Component<IProps, IState> {
    constructor(props: IProps) {
        super(props);
        this.state = {
            pictureToDisplay: 0,
            preClientX: 0,
            mouseDown: false
        }
    }

    //鼠标移出
    onMouseLeave = () => {
        this.setState({
            mouseDown: false
        })
    }
    //鼠标点下
    onMouseDown = (event: React.MouseEvent<HTMLHeadingElement, MouseEvent>) => {
        this.setState({
            preClientX: event.clientX,
            mouseDown: true
        })
    }
    //鼠标抬起
    onMouseUp = (event: React.MouseEvent<HTMLHeadingElement, MouseEvent>) => {
        this.setState({
            preClientX: event.clientX,
            mouseDown: false
        })
    }

    //根据图片总书决定阈值
    thresholdDecide = () => {
        return Math.ceil(720 / this.props.picturePaths.length);
    }

    //切换应该展示的图片
    changePictureToDisplay = (event: React.MouseEvent<HTMLHeadingElement, MouseEvent>) => {
        //若没有按下或没有图片
        if (!this.state.mouseDown || this.props.picturePaths.length === 0) {
            return;
        }
        const { preClientX } = this.state;
        const offset = Math.abs(event.clientX - preClientX);    //当前坐标减去上次变化图片坐标
        //右移    图片id减小
        if (event.clientX > preClientX && offset > 0) {
            if (offset > this.thresholdDecide()) {  //大于阈值，切换图片
                //考虑负
                const rightRes = this.state.pictureToDisplay - Math.floor(offset / this.thresholdDecide());
                this.setState({
                    preClientX: event.clientX,
                    pictureToDisplay: rightRes < 0 ? rightRes + this.props.picturePaths.length : rightRes
                }, () => {
                    console.log("pictureToDisplay", this.state.pictureToDisplay)
                })
            }
        }
        //左移    图片id增大
        if (event.clientX < preClientX && offset > 0) {
            if (offset > this.thresholdDecide()) {  //大于阈值，切换图片
                this.setState({
                    preClientX: event.clientX,
                    pictureToDisplay: (this.state.pictureToDisplay + Math.floor(offset / this.thresholdDecide())) % (this.props.picturePaths.length)
                }, () => {
                    console.log("pictureToDisplay", this.state.pictureToDisplay)
                })
            }
        }
    }


    render() {
        return (
            <div
                style={this.props.picturePaths.length === 0 ? { height: 0 } : { height: 600 }}
                onMouseDown={this.onMouseDown}
                onMouseUp={this.onMouseUp}
                onMouseLeave={this.onMouseLeave}
                onMouseMove={this.changePictureToDisplay}
            >
                {
                    //图片从小到大排序
                    this.props.picturePaths.map(eachPath => Object.assign({},
                        {
                            picNum: Number.parseInt((eachPath.split('/')
                                .pop() as string)
                                .split('.')[0]
                                .split(('_')).pop() as string
                            )
                        },
                        { path: eachPath }))
                        .sort((a, b) => a.picNum - b.picNum)
                        .map((item: { picNum: number, path: string }, index) => {
                            return (
                                <div
                                    style={{
                                        display: index === this.state.pictureToDisplay ? '' : 'none',
                                        userSelect: 'none',
                                        width: '100%',
                                        height: '100%',
                                        backgroundImage: "url(" + item.path + ")",
                                        backgroundRepeat: "no-repeat",
                                        backgroundSize: '100%'
                                    }}
                                    key={this.props.picturePaths[index]}
                                />
                            )
                        })
                }
            </div>
        );
    }
}

export default StereoDisplay;